<template>
  <div class="madp-manager-code" v-show="!isLoading">
    <div class="madp-qrcode-container">
      <img class="buss-card" v-if="uniqueQrCode" :src="uniqueQrCode" alt="" srcset="" />
      <div v-else class="madp-code" id="qrcodeHtml">
        <div class="main" v-if="manageInfo.qrCode">
          <img class="avater" :src="manageInfo.avatar || $defaultAvatar" alt="" srcset="" crossorigin="anonymous" />
          <span class="name">{{ manageInfo.empName }}</span>
          <span class="bus">{{ manageInfo.companyName }}</span>
          <img class="code" :src="manageInfo.qrCode" alt="" srcset="" crossorigin="anonymous" />
          <span class="txt">扫一扫，加我企业微信</span>
          <!-- <img :src="uniqueQrCode" alt /> -->
        </div>
      </div>
    </div>
    <div class="madp-footer">
      <div class="madp-footer-btn cursor-pointer" @click="openListPage">
        <img src="@/assets/img/qrcode/code-p1.png" alt />
        <p>邀请数据</p>
      </div>
      <div class="madp-footer-btn cursor-pointer" @click="sendCard">
        <img src="@/assets/img/qrcode/code-p2.png" alt />
        <p>发送名片</p>
      </div>
    </div>
    <div class="madp-footer-desc">为每一个客户生成专属名片，能让客户带来客户！</div>
  </div>
</template>
<script>
import html2canvas from 'html2canvas'
import * as qrcodeApi from '@/api/qrcode-of-customer'
import mxInitWxConfig from '@/mixin/mxInitWxConfig.js'
export default {
  name: 'madp-manager-code',
  mixins: [mxInitWxConfig],
  data() {
    return {
      isLoading: true,
      showInviteList: false,
      uniqueQrCode: '',
      mediaId: '',
      manageInfo: {}
    }
  },
  watch: {
    wxExternalUserid(nval, oval) {
      if (this.wxExternalUserid && this.wxUserId) {
        this.fetchQrCodeInfo()
      }
    },
    wxUserId(nval, oval) {
      if (this.wxExternalUserid && this.wxUserId) {
        this.fetchQrCodeInfo()
      }
    }
  },
  created() {},
  methods: {
    // 关闭列表页
    openListPage() {
      this.$router.push({
        path: '/customerQRcode/invite-list',
        query: {
          wxUserId: this.wxUserId,
          wxExternalUserid: this.wxExternalUserid
        }
      })
    },
    sendCard() {
      console.log(this.mediaId)
      if (!this.mediaId) return
      if (this.entry === 'single_chat_tools' || this.entry === 'group_chat_tools' || this.entry === 'chat_attachment') {
        this.$wxApi
          .sendChatMessage('image', {
            mediaid: this.mediaId
          })
          .then((res) => {
            //
          })
      }
    },
    fetchQrCodeInfo() {
      let params = {
        wxUserId: this.wxUserId, //当前用户userid(成员userid)
        wxExternalUserid: this.wxExternalUserid //客户userid,
      }
      qrcodeApi.customerQrCodeInfo(params).then((res) => {
        this.isLoading = false
        let info = res.data.data
        this.manageInfo.avatar = info.avatar
        this.manageInfo.empName = info.empName
        this.manageInfo.companyName = info.companyName
        if (info.type == 1) {
          this.manageInfo.qrCode = info.uniqueQrCode
          this.$nextTick(() => {
            this.getHtml2Canvas((file) => {
              qrcodeApi
                .uploadPic({
                  codeId: info.codeId,
                  file: file
                })
                .then((res) => {
                  this.mediaId = res.data.data.mediaId
                })
            })
          })
        } else {
          this.uniqueQrCode = info.uniqueQrCode
          this.mediaId = info.mediaId
        }
      })
    },
    // 生成名片
    getHtml2Canvas(cb) {
      let domObj = document.getElementById('qrcodeHtml')
      html2canvas(domObj, {
        useCORS: true,
        backgroundColor: null
      }).then((canvas) => {
        let base64 = canvas.toDataURL('image/png')
        // 获取到base64编码
        const arr = base64.split(',')
        // 将base64编码转为字符串
        const bstr = window.atob(arr[1])
        let n = bstr.length
        const u8arr = new Uint8Array(n) // 创建初始化为0的，包含length个元素的无符号整型数组
        while (n--) {
          u8arr[n] = bstr.charCodeAt(n)
        }
        let file = new File([u8arr], '', {
          type: 'image/png'
        })
        let formData = new FormData()
        formData.append('file', file)
        cb && cb(formData)
      })
    }
  }
}
</script>
<style scoped lang='scss'>
.madp-manager-code {
  width: 100%;
  background-image: url('../assets/img/financialShop/cus-manager-bg.png');
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  overflow: hidden;
  overflow-y: scroll;
  position: relative;
  .madp-qrcode-container {
    // margin-top: 80px;
    padding: 0 50px;
    .buss-card {
      width: 100%;
      margin-top: 45px;
    }
  }
  .madp-code {
    margin-top: 45px;
    padding-top: 35px;
    width: 100%;
    background: transparent;
    .main {
      padding: 0 27px;
      padding-bottom: 16px;
      padding-top: 47px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: #ffffff;
      box-shadow: 0px 3px 6px 0px rgba(181, 181, 181, 0.16);
      border-radius: 8px;
      font-family: PingFangSC-Medium, PingFang SC;
      position: relative;
      box-shadow: unset !important;
      .avater {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        position: absolute;
        top: -35px;
      }
      .code {
        margin-top: 10px;
        width: 100%;
      }
      .name {
        font-size: 24px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #2c2c2c;
      }
      .bus {
        margin-top: 3px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(44, 44, 44, 0.8);
      }
      .txt {
        margin-top: 16px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(44, 44, 44, 0.8);
      }
    }
  }
  .madp-footer {
    margin: 40px 0 16px 0;
    padding: 0 16px;
    display: flex;
    justify-content: space-between;
    .madp-footer-btn {
      width: 160px;
      height: 40px;
      line-height: 40px;
      display: flex;
      justify-content: center;
      background: #ffffff;
      box-shadow: 0px 3px 6px 0px rgba(181, 181, 181, 0.16);
      border-radius: 20px;
      p {
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(44, 44, 44, 0.8);
      }
      img {
        width: 24px;
        height: 24px;
        position: relative;
        top: 8px;
        margin-right: 8px;
      }
    }
  }
  .madp-footer-desc {
    width: 100%;
    text-align: center;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(44, 44, 44, 0.5);
  }
  .invite-list-page {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
  }
  .showQR {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.5);
    img {
      width: 300px;
    }
  }
}
</style>
